var Video = cc.Class({
    name: 'Video',
	properties: {
        v: null,
        p: null,
        posterPath: null,
        videoPath: null,
        onVideoEnd:null,
	},

	ctor (posterPath, videoPath, onVideoEnd) {
	    if (posterPath == null) cc.log("require posterPath");
	    if (videoPath == null) cc.log("require videoPath");
	    if (onVideoEnd == null) cc.log("onVideoEnd is null");
	    this.posterPath = cc.url.raw(posterPath);
	    this.videoPath = cc.url.raw(videoPath);
	    this.onVideoEnd = onVideoEnd;
		this.init();
    },

    initPosterDiv () {
        //add div
        var div = document.createElement("DIV");
        div.id = "poster";
        div.innerHTML = '<img src=' + this.posterPath + ' alt="" style="position:absolute; left:0; top:0; width:100%;  overflow:auto; z-index:50;">';
        document.body.appendChild(div);
        //add event
        this.p = document.getElementById("poster");
        var self = this;
        this.p.onmousedown = function () {
            self.hid(self.p);
            self.playVideo();
        };
    },

    initVideoDiv () {
        //add div
        var div = document.createElement("DIV");
        div.className = "video-wrapper";
        div.style.position = "relative";
        div.style.height = "100%";
        div.style.overflow = 'hidden';
        document.body.appendChild(div);

        // var div2 = document.createElement("DIV");
        // div2.className = "video-responsive";
        // div2.style.position = "relative";
        // div2.style.width = "100%";
        // document.querySelector(".video-wrapper").appendChild(div2);

        var vIphone = document.createElement("video");
        vIphone.id = "video";
        vIphone.setAttribute('webkit-playsinline', 'webkit-playsinline');
        vIphone.innerHTML = '<source src=' + this.videoPath + ' type="video/mp4">';

        var vOther = document.createElement("video");
        vOther.id = "video";
        vOther.src = this.videoPath;
        vOther.style.height = "0";
        vOther.style.width = "0";
        vOther.style.background = "transparent";
        
        var isIphone = navigator.userAgent.toLowerCase().indexOf('iphone') >= 0;
        if (isIphone) {
            
            document.querySelector(".video-wrapper").appendChild(vIphone);
            //document.querySelector(".video-responsive").appendChild(vIphone);
        } else {
             document.querySelector(".video-wrapper").appendChild(vOther);
            //document.querySelector(".video-responsive").appendChild(vOther);
        }
        //add event
        var self = this;
        this.v = document.getElementById("video");
        this.v.load();
        this.v.onended = function () {
            document.querySelector(".video-wrapper").remove();
            document.removeEventListener('touchmove', this.preventTouchMove);
            if (self.onVideoEnd)
                self.onVideoEnd();
        };
        document.addEventListener('touchmove', this.preventTouchMove);
    },

    init () {
        this.initPosterDiv();
        this.initVideoDiv();
        this.initVideoStyle();
	},
	
	preventTouchMove (e){
		e.preventDefault();
	},
	
	initVideoStyle () {
        var w=document.documentElement.clientWidth;
		var h=document.documentElement.clientHeight;
		var v = this.v;
		v.style.width  = w + "px";
		//v.style.height = h + "px";
        v.style.height = "auto";
		v.style.position = "absolute";
		v.style.left = "0px";
		v.style.top = "0px";
		v.style.zIndex = 5;
		v.background = "#000";
		v.cursor = "pointer";
	},

	playVideo () {
		this.v.play();
	},

	hid(o){
		var i = 1,s = -0.01;
		var t = setInterval(
			function(){
				i+=s;
				o.style.opacity=i;
				if(i<0){
					window.clearInterval(t);
					o.remove();
				}				
			}
		,1);
	}
});

module.exports = Video;